<template>
	<z-paging ref="paging" v-model="list" @query="queryList" height="100vh"
		:paging-style="{ minHeight: '100vh', backgroundColor: '#F5F6F7' }">
		<template #top>
			<!-- 积分值显示区域 -->
			<view class="head_bgc">
				<view class="ruleText" @click="goRuleText">
					积分规则
				</view>
				<image :src="imgUrl + 'upload/img/ws_static/static/userimg/tcyh.png'" class="head_bgi"></image>
				<view class="jf_line">
					<image :src="imgUrl + 'upload/img/ws_static/static/userimg/jf.png'"></image>
					<text>
						{{ $t("integral.header.points", { points: isableUse }) }}
					</text>
				</view>
				<!-- <view class="jf_tips_1">
					<text>{{ $t("integral.header.parkingTip") }}</text>
				</view>
				<view class="jf_tips_2">
					<text>{{ $t("integral.header.groupTip") }}</text>
				</view> -->
			</view>

			<!-- 导航栏 -->
			<view class="navbar">
				<view v-for="(item, index) in menuBar" :key="index" class="nav-item"
					:class="{ current: valIndex === index }" @click="onClickItem(index)">
					<text>{{ $t(`integral.tabs.${index}`) }}</text>
				</view>
			</view>
		</template>

		<!-- 积分内容区域 -->
		<view class="content-box">
			<view class="tabs-container" :style="{ transform: `translateX(-${valIndex * 100}%)` }">
				<view v-for="(tabItem, tabIndex) in menuBar" :key="tabIndex" class="tab-content">
					<view class="list-scroll-content" :class="{ 'animate-in': valIndex === tabIndex }">
						<view class="integral-box" v-for="(item, index) in list" :key="index">
							<view class="integral-item" :style="{ '--item-index': index }">
								<view class="integral-left">
									<view class="title">{{ item.title }}</view>
									<view class="time">{{ item.AddTime }}</view>
									<view class="remark">{{ item.Remark }}</view>
								</view>
								<view class="integral-right" :class="valIndex == 0 ? 'income' : 'expense'">
									<text>{{ item.Points }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</z-paging>
</template>

<script>
	import {
		getUserIntegral,
		getUserIntegralList
	} from "@/api/homePage.js";
	import empty from "@/components/empty.vue";
	import Config from "@/config";
	export default {
		components: {
			empty,
		},
		data() {
			return {
				imgUrl: Config.imgUrl,
				menuBar: ["收入", "支出", "过期"],
				isableUse: 0,
				list: [], //空列表
				integral_list: [],
				income_integral: [],
				expenditure_integral: [],
				Index: 1,
				valIndex: 0, //选中当前积分列表
			};
		},
		onLoad() {
			// 设置导航栏标题
			uni.setNavigationBarTitle({
				title: this.$t("integral.title"),
			});
			this.getIntegralAll();
		},
		watch: {
			// 监听语言变化，更新导航栏标题
			"$i18n.locale"() {
				uni.setNavigationBarTitle({
					title: this.$t("integral.title"),
				});
			},
		},
		methods: {
			goRuleText() {
				uni.navigateTo({
					url: '/ticket_subpages/index/article?id=4804'
				});
			},
			//可用总积分
			async getIntegralAll() {
				try {
					const {
						Data
					} = await getUserIntegral({});
					this.isableUse = Data;
				} catch (e) {
					console.error("获取积分失败:", e);
				}
			},

			// 切换头部menu
			onClickItem(index) {
				this.valIndex = index;
				this.$refs.paging.reload();
				this.list = [];
			},

			// 获取积分列表
			async queryList(pageNo, pageSize) {
				try {
					const {
						Data
					} = await getUserIntegralList({
						Index: pageNo,
						Size: pageSize,
					});

					let list = Data.map((item) => {
						item.AddTime = item.AddTime.replace("T", " ");
						if (item.PointSourceType === 1) {
							item.title = this.$t("integral.types.shopping");
						} else if (item.PointSourceType === 5) {
							item.title = this.$t("integral.types.signin");
						} else if (item.PointSourceType === 8) {
							item.title = this.$t("integral.types.receipt");
						} else if (item.PointSourceType === 90) {
							item.title = "新用户奖励";
						} else if (item.PointSourceType === 91) {
							item.title = "购物奖励";
						} else {
							item.title = this.$t("integral.types.couponExchange");
						}

						if (item.PointStatus === 1) {
							item.Points = "+" + item.Points;
							this.integral_list.push(item);
						} else if (item.PointStatus === 2) {
							item.Points = "-" + item.Points;
							this.income_integral.push(item);
						}

						return item;
					});

					// 根据当前tab筛选数据
					let filteredList = list.filter((item) => {
						if (this.valIndex === 0) {
							return item.PointStatus === 1;
						} else if (this.valIndex === 1) {
							return item.PointStatus === 2;
						} else if (this.valIndex === 2) {
							return item.PointStatus === 3;
						}
						return false;
					});

					this.$refs.paging.complete(filteredList);
				} catch (e) {
					this.$refs.paging.complete(false);
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	/* 积分头部样式 */
	.head_bgc {
		width: 100%;
		height: 360rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;

		.ruleText {
			position: absolute;
			top: 20rpx;
			right: 100rpx;
			color: #F59B61;
			padding: 6rpx 10rpx;
			border: 2rpx solid #F59B61;
			border-radius: 10rpx;
			font-size: 26rpx;
		}

		.head_bgi {
			width: 100%;
			height: 100%;
		}

		.jf_line,
		.jf_tips_1,
		.jf_tips_2 {
			position: absolute;
			left: 7.1%;
		}

		.jf_line {
			top: 10%;
			display: flex;
			align-items: center;
			font-family: PingFangSC-Medium;
			font-size: 40rpx;
			color: #ffac15;
			letter-spacing: 0;
			-webkit-text-stroke: 1rpx white;
			text-stroke: 1rpx white;
			height: 40rpx;
			line-height: 40rpx;
			font-weight: 600;

			&>image {
				width: 42rpx;
				height: 42rpx;
				margin-right: 6rpx;
			}
		}

		.jf_tips_1,
		.jf_tips_2 {
			height: 62rpx;
			padding-left: 20rpx;
			line-height: 62rpx;
			font-family: PingFangSC-Medium;
			font-size: 28rpx;
			color: #ff6b0d;
			background-image: linear-gradient(270deg,
					rgba(255, 255, 255, 0.03) 3%,
					rgba(255, 255, 255, 0.58) 100%);
			border-radius: 8rpx;
		}

		.jf_tips_1 {
			top: 26%;
		}

		.jf_tips_2 {
			top: 48%;
		}
	}

	/* 导航栏样式 */
	.navbar {
		display: flex;
		height: 98rpx;
		background: #ffffff;
		position: relative;
		z-index: 10;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

		.nav-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 24rpx;
			color: #666;
			position: relative;
			transition: all 0.3s ease;
			cursor: pointer;

			text {
				display: inline-block;
				padding: 10rpx 30rpx;
				border-radius: 30rpx;
				transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
				position: relative;
				z-index: 1;

				&:after {
					content: "";
					position: absolute;
					bottom: 6rpx;
					left: 50%;
					width: 0;
					height: 3rpx;
					background-color: #00bfff;
					transition: width 0.3s ease, left 0.3s ease;
					z-index: 0;
				}
			}

			&:active text {
				transform: scale(0.95);
			}

			&.current {
				text {
					font-size: 30rpx;
					font-weight: 600;
					background-color: #00bfff;
					color: #ffffff;
					transform: translateY(0) scale(1);
					animation: popIn 0.4s ease;

					@keyframes popIn {
						0% {
							transform: translateY(10rpx) scale(0.9);
							opacity: 0.7;
						}

						70% {
							transform: translateY(-5rpx) scale(1.05);
						}

						100% {
							transform: translateY(0) scale(1);
						}
					}
				}

				&:after {
					content: none;
				}
			}
		}
	}

	/* 内容区域样式 */
	.content-box {
		position: relative;
		width: 100%;
		overflow: hidden;
	}

	/* 横向排列的tab容器 */
	.tabs-container {
		display: flex;
		width: 100%;
		transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
		will-change: transform;
	}

	.tab-content {
		flex: 0 0 100%;
		width: 100%;
	}

	.list-scroll-content {
		height: 100%;
		padding: 24rpx;
		box-sizing: border-box;
		opacity: 0;
		transform: translateY(30rpx);
		transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);

		&.animate-in {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.integral-box {
		position: relative;
		margin-bottom: 24rpx;

		.integral-item {
			background-color: #fff;
			width: 100%;
			height: 180rpx;
			border-radius: 16rpx;
			display: flex;
			animation: fadeInUp 0.5s ease forwards;
			animation-delay: calc(0.1s * var(--item-index, 0));
			will-change: transform, opacity;
			transition: all 0.3s ease;
			box-shadow: 0 2rpx 20rpx rgba(0, 0, 0, 0.05);
			position: relative;
			overflow: hidden;

			&:active {
				transform: scale(0.98);
				box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.03);
			}

			@keyframes fadeInUp {
				from {
					opacity: 0;
					transform: translateY(30rpx);
				}

				to {
					opacity: 1;
					transform: translateY(0);
				}
			}

			.integral-left {
				flex: 1;
				padding: 32rpx;
				box-sizing: border-box;

				.title {
					font-size: 32rpx;
					color: #333;
					font-weight: 600;
					margin-bottom: 16rpx;
					line-height: 1.4;
				}

				.time {
					font-size: 24rpx;
					color: #999;
					margin-bottom: 8rpx;
				}

				.remark {
					font-size: 24rpx;
					color: #666;
					line-height: 1.4;
				}
			}

			.integral-right {
				width: 200rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 36rpx;
				font-weight: 600;
				position: relative;

				&::before {
					content: "";
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
					width: 2rpx;
					height: 60%;
					background: linear-gradient(to bottom, transparent, #eee, transparent);
				}

				&.income {
					color: #00bfff;
				}

				&.expense {
					color: #ff6b6b;
				}
			}
		}
	}
</style>